<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <meta charset="utf-8">
  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <script src="../../../web-component-tester/browser.js"></script>
  <link rel="import" href="../../polymer.html">
  <link rel="import" href="custom-style-import.html">
  <style is="custom-style">
    x-bar {
      border: 1px solid red;
      display: block;
    }

    x-foo::shadow #bar2 {
      border: 2px solid orange;
      display: block;
    }

    :root {

      --italic: italic;

      --bag: {
        margin: 1px;
        border: 1px solid black;
      };

      /* mocha.css in the testing environment is hosing this test;
      use !important as a workaround */
      margin: 10px !important;
      width: auto;

      --special: var(--primary);
    }

    x-foo {
      
      --primary: 10px;
    }


  </style>
  <style is="custom-style">
    .bag {
      @apply(--bag);
    }

    .italic {
      font-style: var(--italic);
    }

    .import-mixin {
      @apply(--import-mixin);
    }

    .import-var {
      border: var(--import-var);
    }

    .dynamic {
      border: var(--dynamic);
    }
  </style>
</head>
<body>
  <div class="italic">italic</div>
  <div class="bag">bag</div>
  <div class="mix">mix</div>

  <div class="dynamic">dynamic</div>

  <div class="import-mixin">import-mixin</div>
  <div class="import-var">import-var</div>

  <x-bar></x-bar>

  <x-foo></x-foo>

  <dom-module id="x-foo">
    <style>
      :host {
        display: block;
        border: solid tomato;
        border-width: var(--special);
      }

      div {
        @apply(--bag);
      }
    </style>
    <template>
      <div id="me">x-foo</div>
      <x-bar id="bar1"></x-bar>
      <x-bar id="bar2"></x-bar>
    </template>
  </dom-module>

  <dom-module id="x-bar">
    <style>
      :host {
        display: block;
      }
    </style>
    <template>
      <div>x-bar</div>
    </template>
  </dom-module>

  <script>

    suite('x-style', function() {

      suiteSetup(function() {
    
        Polymer({
          is: 'x-bar'
        });

        Polymer({
          is: 'x-foo'
        });

        xBar = document.querySelector('x-bar');
        xFoo = document.querySelector('x-foo');

      });

      test('root styles applied', function() {
        assertComputed(xBar, '1px');
      });

      test('root styles have lower bound encapsulation', function() {
        assertComputed(xFoo.$.bar1, '0px');
      });

      test('::shadow styles applied', function() {
        assertComputed(xFoo.$.bar2, '2px');
      });

      test('custom properties registered as defaults', function() {
        var props = Polymer.StyleDefaults._styleProperties;
        assert.property(props, '--italic');
        assert.property(props, '--bag');
      });

      test('custom-styles apply normal and property values to main document', function() {
        var bag = document.querySelector('.bag');
        var italic = document.querySelector('.italic');
        assertComputed(document.body, '10px', 'margin-top');
        assertComputed(bag, '1px');
        assertComputed(italic, 'italic', 'font-style');
      });

      test('imported custom-styles apply', function() {
        assertComputed(document.body, '10px', 'padding-top');
        var v = document.querySelector('.import-var');
        var m = document.querySelector('.import-mixin');
        assertComputed(v, '3px');
        assertComputed(m, '4px');
      });

      test('dynamic custom-styles apply', function(done) {
        var dynamic = document.querySelector('.dynamic');
        assertComputed(dynamic, '0px');
        var ds = document.createElement('style', 'custom-style');
        ds.textContent = ':root { --dynamic: 11px solid orange; }';
        document.head.appendChild(ds);
        setTimeout(function() {
          Polymer.updateStyles();
          assertComputed(dynamic, '11px');
          done();
        }, 0);
      });

      test('custom-styles apply normal and property values to elements', function() {
        var e = document.querySelector('x-foo').$.me;
        assertComputed(e, '1px');
      });

    });


    function assertComputed(element, value, property) {
      var computed = getComputedStyle(element);
      property = property || 'border-top-width';
      assert.equal(computed[property], value, 'computed style incorrect for ' + property);
    }

  </script>

</body>
</html>
